<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { createQRCode } from '@/utils/qrcode'
import { callCamera, screenCapture, getVideo } from '@/utils/mediaDevices'
import { uploadFile, file2Base64 } from '@/utils'
import toImage from '@/utils/toImage'
import { useCocoSsd } from '@/hooks/useCocoSsd'

const canvasRef = ref()
const videoRef = ref()
const videoRef2 = ref()
const imgRef = ref()
const imgRef2 = ref()

// 创建二维码
const cr = () => {
  createQRCode(canvasRef.value, 'http://192.168.1.36:3000')
}
// 设备摄像头
const cc = async () => {
  await callCamera(videoRef.value)
}
// 视频人车检测
useCocoSsd(videoRef)
// 图片
const uf = () => {
  uploadFile((file) => file2Base64(file).then((res) => (imgRef2.value.src = res)))
}
useCocoSsd(imgRef2)
// 捕捉屏幕
const sc = () => {
  screenCapture(videoRef2.value).then((res) => getVideo(videoRef2.value, 5000))
}
//html转图片
// 不显示文字的组件，给父元素加flex
const ti = () => {
  imgRef.value.innerHTML = ''
  toImage(document.body, imgRef.value)
}

const handleClick = (tab) => {
  switch (tab.paneName) {
    case '0':
      cr()
      break
    case '1':
      cc()
      break
    case '2':
      uf()
      break
    case '3':
      sc()
      break
    case '4':
      ti()
      break
  }
}

onMounted(() => {
  cr()
})
</script>

<template>
  <el-tabs type="border-card" @tab-click="handleClick">
    <el-tab-pane label="二维码" name="0">
      <canvas ref="canvasRef" />
    </el-tab-pane>
    <el-tab-pane label="摄像头人车检测" name="1">
      <div style="position: relative; width: 600px; height: 400px">
        <video ref="videoRef" style="width: 100%; height: 100%; object-fit: fill" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="图片人车检测" name="2">
      <div style="position: relative; width: 800px; height: 400px">
        <img ref="imgRef2" style="width: 100%; height: 100%; object-fit: fill" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="录屏" name="3">
      <video ref="videoRef2" width="1280" height="720" />
    </el-tab-pane>
    <el-tab-pane label="页面转图片" name="4">
      <div ref="imgRef" style="overflow: auto"></div>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped></style>
